<template>
	<div class="dir">
		<TreeFilter title="目录" :right-menu-filter="(data)=>data.dir_id !== 0" ref="treeFilter" :requestApi="dirAllPromise" label="dir_name" id="dir_id" :icon="{
			open: 'FolderOpened',
			close: 'Folder'
		}" :defaultValue="dir_id" @change="changeTreeFilter" @addSon="addSon" @del="treeDel" @edit="treeEdit">
			<template #filterHeader>
				<el-button type="primary" :icon="CirclePlus" @click="() => openDrawer()">添加目录</el-button>
			</template>
		</TreeFilter>
		<div class="right card">
			<div class="right-top" >
				<el-tooltip class="item" effect="dark" content="按住CTRL+左键可多选文件" placement="bottom">
					<el-button class="button" type="success" :icon="CirclePlus" @click="upload">上传素材</el-button>
				</el-tooltip>
				<el-button class="button" type="danger" :icon="Delete">批量删除</el-button>

				<el-button class="button" type="warning" :icon="Files">上传列表</el-button>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { dirAll } from "@/api/modules/upload";
import { CirclePlus, Delete , Files } from "@element-plus/icons-vue";
import TreeFilter from "@/components/TreeFilter/index.vue";

interface Props {
	is_common: 1 | 0;
}

const props = withDefaults(defineProps<Props>(), {
	is_common: 0
});

const dirAllPromise = () => {
	return new Promise(async (resolve) => {
		let res = await dirAll(props.is_common);
		res.data.unshift({
			dir_name: '全部资源',
			is_common: props.is_common,
			dir_pid: "0",
			dir_sort: 0,
			dir_id: "0",
		});
		resolve(res);
	});
}


// const params = reactive<{ dir_id: number }>({
// 	dir_id: 0
// });

const dir_id = ref<number|string>(0);

/* ref 组件 */
const treeFilter = ref<InstanceType<typeof TreeFilter>>();

const emits = defineEmits<{
	// (event: "changeTreeFilter", data: any): void;
	(event: "treeDel", is_common: 1 | 0, data: any, now_dir_id: number|string): void;
	(event: "treeEdit", is_common: 1 | 0, data: any): void;
	// (event: "addSon", is_common: 1|0,dir_pid:number): void;
	(event: "openDrawer", is_common: 1 | 0, dir_pid: number|string): void;
	(event: "upload", is_common: 1 | 0, dir_id: number|string): void;
}>();

const addSon = (data: any) => {
	emits("openDrawer", props.is_common, data.dir_id);
};
const changeTreeFilter = (val: number) => {
	dir_id.value = val;
};
const treeDel = (data: any) => {
	// pagesFormDrawer.value?.open(data.menu_id);
	emits("treeDel", props.is_common, data, dir_id.value);
};
const treeEdit = (data: any) => {
	// pagesFormDrawer.value?.open(data.menu_id);
	emits("treeEdit", props.is_common, data);
};
const openDrawer = () => {
	emits("openDrawer", props.is_common, 0);
};
const upload = () => {
	emits("upload", props.is_common, dir_id.value);
};
defineExpose({ treeFilter });
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
